<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Crop Images</title>
<link rel="stylesheet" href="css/common.css" type="text/css" />
<link rel="stylesheet" href="css/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>
<style type="text/css">
.crop_preview{position:absolute; left:500px; top:0; width:150px; height:150px; overflow:hidden;}
</style>
<script type="text/javascript">
	$(document).ready(function(){
		function GetUrlParms()    
		{
			 var args=new Object();   
			 var query=location.search.substring(1);//获取查询串   
			 var pairs=query.split("&");//在逗号处断开   
			 for(var    i=0;i<pairs.length;i++)   
			 {   
				 var pos=pairs[i].indexOf('=');//查找name=value   
					if(pos==-1)   continue;//如果没有找到就跳过   
					 var argname=pairs[i].substring(0,pos);//提取name   
					var value=pairs[i].substring(pos+1);//提取value   
					args[argname]=unescape(value);//存为属性   
			}
			 return args;
		}
		
		var args = new Object();
		args = GetUrlParms();
		var pic_url = args['pic_url'];
		var rel_url = args['rel_url'];
		var pid = args['pid'];
		var crop_false = args['crop_false'];
		var crop_noselect = args['crop_noselect'];
		$('#picBox').attr('src',pic_url);
		$('#crop_preview').attr('src',pic_url);
		
		var api;
		//记得放在jQuery(window).load(...)内调用，否则Jcrop无法正确初始化
		$("#picBox").Jcrop({
			onChange:   showCoords,
			onSelect:   showCoords,
		},function(){
		  api = this;
		  api.setSelect([130,65,130+350,65+285]);
		  api.setOptions({ bgFade: true });
		  api.ui.selection.addClass('jcrop-selection');
		});
		
		function showCoords(c)
		{
			$('#canshu_x').val(c.x);
			$('#canshu_y').val(c.y);
			$('#canshu_w').val(c.w);
			$('#canshu_h').val(c.h);
		};
		
		$("#crop_submit").click(function(){
			if(parseInt($("#canshu_x").val())){
				var sw  = $('#picBox').width();
				
				$.get(rel_url+'admin.php?s=/Uplaod/crop&pic_url='+pic_url+'&x='+$("#canshu_x").val()+'&y='+$("#canshu_y").val()+'&sw='+sw+'&w='+$("#canshu_w").val()+'&h='+$("#canshu_h").val(),function(data){
					//data = eval("("+data+")");
					if(data.crop=='ok'){
						window.parent.jQuery('#p_'+pid).parent('dl').children('dt').html('<img src="'+data.url+'"/>');
						window.parent.jQuery('#p_'+pid).parent('dl').children('input:hidden').val(data.url);
						window.parent.jQuery('.aui_close').click();
					}else{
						alert(crop_false+","+data.tis);
					}
				},'json');
			}else{
				alert(crop_noselect);	
			}
		});
	});
</script>
</head>
<body>
<div class="zxx_in_box">
<div class="rel">
    <img id="picBox" src="" />
</div>
<div class="form">
	<input type="hidden" id="canshu_x" value="0"/>
    <input type="hidden" id="canshu_y" value="0"/>
    <input type="hidden" id="canshu_w" value="0"/>
    <input type="hidden" id="canshu_h" value="0"/>
    <input type="button" value="确认剪裁" id="crop_submit" />
</div>
</div>
</body>
</html>